<template>
  <view class="container">
    <view class="example">
      <uni-forms class="form" ref="form" :model="user" labelWidth="80px">
        <!--        <uni-forms-item label="用户头像" name="avatar">-->
        <!--        </uni-forms-item>-->
        <up-cell-group>
<!--          <up-cell title="头像" :isLink="true" arrow-direction="right">-->
<!--            <template #value>-->
<!--              <view class="avatar">-->
<!--                <view class="cl" @click="getImage"></view>-->
<!--                <image class="img" v-if="fileAvatarSrc" :src="fileAvatarSrc"/>-->
<!--                <image class="img" v-else :src="baseUrl + user.avatar"/>-->

<!--              </view>-->
<!--              &lt;!&ndash;              <up-upload&ndash;&gt;-->
<!--              &lt;!&ndash;                  @click=""&ndash;&gt;-->
<!--              &lt;!&ndash;                  :fileList="fileList1"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :previewFullImage="true"&ndash;&gt;-->
<!--              &lt;!&ndash;                  @afterRead="afterRead"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :multiple="false"&ndash;&gt;-->
<!--              &lt;!&ndash;                  name="1"&ndash;&gt;-->
<!--              &lt;!&ndash;                  :maxCount="2"&ndash;&gt;-->
<!--              &lt;!&ndash;              ></up-upload>&ndash;&gt;-->
<!--            </template>-->
<!--          </up-cell>-->
          <up-cell title="昵称" :isLink="true" arrow-direction="right">
            <template #value>
              <uni-easyinput :clearable="false" v-model="user.nickName" placeholder="请输入昵称"/>
            </template>
          </up-cell>
          <up-cell title="手机号" :isLink="true" arrow-direction="right">
            <template #value>
              <uni-easyinput :clearable="false" v-model="user.phonenumber" placeholder="请输入手机号"/>
            </template>
          </up-cell>
          <up-cell title="邮箱" :isLink="true" arrow-direction="right">
            <template #value>
              <uni-easyinput :clearable="false" v-model="user.email" placeholder="请输入邮箱"/>
            </template>
          </up-cell>
          <up-cell title="school" :isLink="true" arrow-direction="right">
            <template #value>
              <uni-easyinput :clearable="false" v-model="user.school" placeholder="请输入school"/>
            </template>
          </up-cell>
          <up-cell title="生日" :isLink="true" arrow-direction="right"
                   @click.prevent="show=!show">
            <template #value>
<!--              <uni-easyinput :clearable="false" v-model="user.birthday" placeholder="请选择生日"/>-->
              <picker mode="date" :value="user.birthday" @change="bindDateChange">
                <view class="uni-input">{{user.birthday}}</view>
              </picker>
              <up-datetime-picker
                  hasInput
                  :show="show"
                  v-model="user.birthday"
                  mode="date"
                  :formatter="formatter"
              ></up-datetime-picker>
            </template>
          </up-cell>
        </up-cell-group>
        <!--        <uni-forms-item label="用户昵称" name="nickName">-->
        <!--          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称"/>-->
        <!--        </uni-forms-item>-->
        <!--        <uni-forms-item label="手机号码" name="phonenumber">-->
        <!--          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码"/>-->
        <!--        </uni-forms-item>-->
        <!--        <uni-forms-item label="邮箱" name="email">-->
        <!--          <uni-easyinput v-model="user.email" placeholder="请输入邮箱"/>-->
        <!--        </uni-forms-item>-->
        <!--        <uni-forms-item label="性别" name="sex" required>-->
        <!--          <uni-data-checkbox v-model="user.sex" :localdata="sexs"/>-->
        <!--        </uni-forms-item>-->
      </uni-forms>
      <button class="submit-btn" type="primary" @click="submit">保存</button>
    </view>
  </view>
</template>

<script>
import {getUserProfile, uploadAvatar} from "@/api/system/user"
import {updateUserProfile} from "@/api/system/user"
import store from '@/store'
import config from "@/config";
const baseUrl = config.baseUrl

export default {
  data() {
    return {
      show: false,
      fileAvatarSrc: null,
      fileAvatar: null,
      fileList1: [],
      baseUrl,
      formatter (type, value) {
        if (type === 'year') {
          return `${value}年`;
        }
        if (type === 'month') {
          return `${value}月`;
        }
        if (type === 'day') {
          return `${value}日`;
        }
        return value;
      },
      user: {
        avatar: null,
        nickName: "",
        phonenumber: "",
        email: "",
        school: "",
        sex: "",
        fileAvatar: null,
        birthday: null
      },
      sexs: [{
        text: '男',
        value: "0"
      }, {
        text: '女',
        value: "1"
      }],
      rules: {
        nickName: {
          rules: [{
            required: true,
            errorMessage: '用户昵称不能为空'
          }]
        },
        phonenumber: {
          rules: [{
            required: true,
            errorMessage: '手机号码不能为空'
          }, {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            errorMessage: '请输入正确的手机号码'
          }]
        },
        email: {
          rules: [{
            required: true,
            errorMessage: '邮箱地址不能为空'
          }, {
            format: 'email',
            errorMessage: '请输入正确的邮箱地址'
          }]
        },

      }
    }
  },
  onLoad() {
    this.getUser()
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    getImage() {
      uni.chooseImage({
        success: (res) => {
          console.log('getImage', res)
          this.fileAvatarSrc = res.tempFilePaths[0]
          this.fileAvatar = res.tempFiles[0]
          console.log('getImage1', res.tempFiles[0])
          // uni.getImageInfo({
          //   src: res.tempFilePaths[0],
          //   success: (image) => {
          //     console.log('getImageInfo', image)
          //   }
          // })
        }
      })
    },
    bindDateChange(e) {
      this.user.birthday = e.detail.value
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
      })
    },
    submit(ref) {
      this.user.fileAvatar = this.fileAvatar
      console.log('submit', this.user.fileAvatar)

      this.$refs.form.validate().then(res => {
        updateUserProfile(this.user).then(response => {
          uni.showToast({
            title: '修改成功',
            mask: false,
            duration: 1000
          });
          store.dispatch('GetInfo')
          // uni.navigateBack();
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f5fa;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  position: relative;

  .cl {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 10;
  }

  .img {
    width: 100%;
    height: 100%;
  }
}

.example {
  margin-top: 20rpx;
  //padding: 15px;
  //background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form {
  background-color: #fff;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}


.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}

.submit-btn {
  background-color: #c8c8c8;
  width: 170px;
  height: 80rpx;
  color: #474747;
  line-height: 80rpx;
  border-radius: 50rpx;
  margin-top: 20rpx;
}

::v-deep .u-cell__body {
  padding: 30rpx 20rpx;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .uni-easyinput {
  .uni-easyinput__content {
    border: none;

    .uni-input-input {
      text-align: right;

      &::placeholder {
        text-align: right;
        color: #f20;
      }
    }
    .uni-input-input::placeholder {
      text-align: right;
      color: #f20;
    }
  }
}
</style>
